<template>
  <view class="menu_list">
    <view class="menu_item" v-for="item in list" :key="item.id" @tap="itemClick(item.id)">
      <view class="logo">
        <image :src="item.icon" mode=""></image>
      </view>
      <view class="text">
        <text>{{item.name}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            id: 0,
            name: '二手车',
            icon: require('@/static/images/home/oldCar.png')
          },
          {
            id: 1,
            name: '准新车',
            icon: require('@/static/images/home/newCar.png')
          },
          {
            id: 2,
            name: '新车',
            icon: require('@/static/images/home/goodCar.png')
          },
          {
            id: 3,
            name: '黑标车',
            icon: require('@/static/images/home/heibiao.png')
          }
        ]
      };
    },
    methods: {
      itemClick(id) {
        if (id < 4) {
          uni.reLaunch({
            url: '/pages/buyCar/buyCar?carType=' + id
          })
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  .menu_list {
    padding: 40upx 0;
    display: flex;
    flex-wrap: wrap;

    .menu_item {
      width: 25%;
      height: 150upx;
      display: flex;
      flex-direction: column;

      .logo {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 80upx;
          height: 80upx;
        }
      }

      .text {
        height: 32upx;
        color: #606266;
        font-size: 24upx;
        text-align: center;
      }

    }
  }
</style>
